<template>
  <div>
    <el-config-provider :locale="zhCn">
      <el-form :inline="true" :model="searchForm" size="small">
        <el-form-item label="日期">
          <el-date-picker
            v-model="searchForm.date"
            type="daterange"
            range-separator="To"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="onSubmit"
            >搜索</el-button
          >
          <el-button size="small" type="primary" @click="czSubmit"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </el-config-provider>

    <el-table
      ref="tableRef"
      :data="tableData"
      style="width: 100%; height: 100%"
    >
      <el-table-column type="index" label="序号" width="80" fixed />
      <el-table-column prop="lNum" label="料号" width="120" fixed />
      <el-table-column prop="pmName" label="品名" width="120" fixed />
      <el-table-column prop="orderNum" label="生产订单编号" width="150" fixed />
      <el-table-column
        v-for="(item, i) in tableData"
        :key="item.id"
        :label="item.date"
      >
        <el-table-column prop="finishNum" width="120" label="完工数量" />
        <el-table-column prop="ruNum" width="120" label="入库数量" />
      </el-table-column>
    </el-table>
    <div class="pageBox">
      <el-config-provider :locale="zhCn">
        <el-pagination
          v-model:current-page="tablePage.currentPage"
          v-model:page-size="tablePage.pageSize"
          :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-config-provider>
    </div>
  </div>
</template>

<script setup>
import { ElConfigProvider } from "element-plus";
// 引入中文包
import zhCn from "element-plus/es/locale/lang/zh-cn";
import { ref, reactive } from "vue";
import { getList } from "@/api/index";
const tableData = ref([]);
const total = ref(0);
const searchForm = reactive({
  date: "",
});
const tablePage = reactive({
  currentPage: 1,
  pageSize: 10,
  startDate: null,
  endDate: null,
});
const list = () => {
  getList(tablePage).then((res) => {
    tableData.value = [];
    tableData.value = res.data;
    total.value = res.total;
  });
};
list();
const handleSizeChange = (val) => {
  tablePage.pageSize = val;
  list();
};
const handleCurrentChange = (val) => {
  tablePage.currentPage = val;
  list();
};
const onSubmit = () => {
  console.log(searchForm.date);
  tablePage.startDate = searchForm.date[0];
  tablePage.endDate = searchForm.date[1];
  list();
};
const czSubmit = () => {
  searchForm.date = "";
  tablePage.startDate = null;
  tablePage.endDate = null;
  tablePage.pageSize = 10;
  tablePage.currentPage = 1;
  list();
};
</script>
<style lang="scss" scoped>
.pageBox {
  margin-top: 20px;
  float: right;
}
</style>
